<template>
  <div
    style="-webkit-font-smoothing: antialiased;text-transform: capitalize;overflow-x: hidden;"
    class="min-h-screen bg-gray-100"
  >
    <el-row type="flex" :gutter="24" class="p-6 text-gray-700">
      <el-col :span="6">
        <div class="p-4 bg-white rounded-md">
          <el-row type="flex" justify="space-between">
            <div
              class="flex flex-row justify-center items-center w-12 h-12 rounded-full bg-red-500"
            >
              <i class="el-icon-ice-cream-round text-2xl text-white"></i>
            </div>
            <section class="text-right">
              <p class="text-xs text-gray-500">Number</p>
              <p class="text-xl text-gray-700">150 Ice-cream</p>
            </section>
          </el-row>
          <hr class="my-4 border-gray-100" />
          <el-row type="flex" align="middle">
            <i class="el-icon-refresh-right text-md text-gray-500"></i>
            <span class="ml-2 text-sm text-gray-500">Update now</span>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="p-4 bg-white rounded-md">
          <el-row type="flex" justify="space-between">
            <div
              class="flex flex-row justify-center items-center w-12 h-12 rounded-full bg-green-500"
            >
              <i class="el-icon-potato-strips text-2xl text-white"></i>
            </div>
            <section class="text-right">
              <p class="text-xs text-gray-500">Number</p>
              <p class="text-xl text-gray-700">124 Potato-strips</p>
            </section>
          </el-row>
          <hr class="my-4 border-gray-100" />
          <el-row type="flex" align="middle">
            <i class="el-icon-refresh-right text-md text-gray-500"></i>
            <span class="ml-2 text-sm text-gray-500">Update now</span>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="p-4 bg-white rounded-md">
          <el-row type="flex" justify="space-between">
            <div
              class="flex flex-row justify-center items-center w-12 h-12 rounded-full bg-blue-500"
            >
              <i class="el-icon-sugar text-2xl text-white"></i>
            </div>
            <section class="text-right">
              <p class="text-xs text-gray-500">Number</p>
              <p class="text-xl text-gray-700">362 Sugar</p>
            </section>
          </el-row>
          <hr class="my-4 border-gray-100" />
          <el-row type="flex" align="middle">
            <i class="el-icon-refresh-right text-md text-gray-500"></i>
            <span class="ml-2 text-sm text-gray-500">Update now</span>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="p-4 bg-white rounded-md">
          <el-row type="flex" justify="space-between">
            <div
              class="flex flex-row justify-center items-center w-12 h-12 rounded-full bg-purple-500"
            >
              <i class="el-icon-coffee text-2xl text-white"></i>
            </div>
            <section class="text-right">
              <p class="text-xs text-gray-500">Number</p>
              <p class="text-xl text-gray-700">66 Coffee</p>
            </section>
          </el-row>
          <hr class="my-4 border-gray-100" />
          <el-row type="flex" align="middle">
            <i class="el-icon-refresh-right text-md text-gray-500"></i>
            <span class="ml-2 text-sm text-gray-500">Update now</span>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="24" class="p-6 pt-0 text-gray-700">
      <el-col :span="10">
        <div class="p-4 bg-white rounded-md">
          <el-row type="flex" justify="space-between" align="middle">
            <p class="text-sm text-gray-500">Task</p>
            <el-dropdown placement="top-end">
              <span class="el-dropdown-link">
                <i class="el-icon-s-tools text-lg"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>Action</el-dropdown-item>
                  <el-dropdown-item>Edit</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-row>
          <div class="mt-4 h-70 overflow-y-auto">
            <div v-for="(item,index) in task" :key="index">
              <hr class="mt-4 mb-4 border-gray-100" />
              <el-row type="flex" justify="space-between" align="middle">
                <div>
                  <p class="text-gray-700 text-lg">{{ item.title }}</p>
                  <p class="text-gray-500 text-sm">status: {{ item.status }} , {{ item.time }}</p>
                </div>
                <i class="el-icon-paperclip text-xl text-gray-500"></i>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="p-4 bg-white rounded-md">
          <p class="py-1 text-sm text-gray-500">Management table</p>
          <div class="mt-4 h-70 overflow-y-auto">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="日期" width="180">
                <template #default="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="姓名" width="180">
                <template #default="scope">
                  <el-popover effect="light" trigger="hover" placement="top">
                    <template #default>
                      <p>姓名: {{ scope.row.name }}</p>
                      <p>住址: {{ scope.row.address }}</p>
                    </template>
                    <template #reference>
                      <div class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                      </div>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

let tableData = ref([{
  "date": "2016-05-02",
  "name": "王小虎",
  "address": "上海市普陀区金沙江路 1518 弄"
}, {
  "date": "2016-05-04",
  "name": "王小虎",
  "address": "上海市普陀区金沙江路 1517 弄"
}, {
  "date": "2016-05-01",
  "name": "王小虎",
  "address": "上海市普陀区金沙江路 1519 弄"
}, {
  "date": "2016-05-03",
  "name": "王小虎",
  "address": "上海市普陀区金沙江路 1516 弄"
}])

let task = ref([
  {
    title: 'Complete fuep initialization project.',
    status: 'fixed',
    time: '4-20'
  },
  {
    title: 'Create app shell with header and aside.',
    status: 'fixed',
    time: '4-21'
  },
  {
    title: 'Add light and dark themes.',
    status: 'fixed',
    time: '4-23'
  },
  {
    title: 'Add navigation logic.',
    status: 'fixed',
    time: '4-25'
  },
  {
    title: 'Add some demo pages.',
    status: 'fixed',
    time: '4-29'
  },
  {
    title: 'Find a girlfriend.',
    status: 'processing',
    time: 'unkonw'
  }
])
</script>
<route lang="yaml">
  meta:
    level: 1
    name: 'Home'
    layout: default
</route>